<template>
  <div class="login-page-root">
    <div class="login-content">
      <div class="lottie-wrap">
        <lottie-player
          src="https://assets2.lottiefiles.com/packages/lf20_ktwnwv5m.json"
          background="transparent"
          speed="1"
          style="width: 120px; height: 120px; margin: 0 auto;"
          loop
          autoplay
        />
      </div>
      <div class="login-title">权限管理系统登录</div>
      <v-card class="login-card" max-width="400" elevation="4" theme="light">
        <div class="login-card-title">请输入账号密码</div>
        <v-form @submit.prevent="onLogin" class="login-form">
          <v-text-field v-model="username" label="用户名" prepend-inner-icon="mdi-account" variant="outlined" density="comfortable" autofocus required />
          <v-text-field v-model="password" label="密码" prepend-inner-icon="mdi-lock" variant="outlined" density="comfortable" type="password" required />
          <div v-if="error" class="error-msg">{{ error }}</div>
          <v-btn color="primary" block large :loading="loading" @click="onLogin" elevation="2">登录</v-btn>
        </v-form>
      </v-card>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { login } from '@/api/auth'
// LottiePlayer全局引入或本地引入

const username = ref('')
const password = ref('')
const error = ref('')
const loading = ref(false)
const router = useRouter()

onMounted(() => {
  if (localStorage.getItem('token')) {
    router.replace('/')
  }
})

function onLogin() {
  error.value = ''
  if (!username.value || !password.value) {
    error.value = '请输入用户名和密码'
    return
  }
  loading.value = true
  login({ userName: username.value, userPassword: password.value })
    .then(res => {
      if (res.data && res.data.success && res.data.token) {
        localStorage.setItem('token', res.data.token)
        if (window.__loadMenu) {
          window.__loadMenu()
            ?.then?.(() => router.push('/'))
            ?.catch?.(() => router.push('/'))
        } else {
          router.push('/')
        }
      } else {
        error.value = res.data?.msg || '登录失败'
      }
    })
    .catch(() => {
      error.value = '登录失败，请检查用户名或密码'
    })
    .finally(() => {
      loading.value = false
    })
}
</script>

<style scoped>
.login-page-root {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--v-theme-background);
  height: 100vh;
  box-sizing: border-box;
}
.login-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  justify-content: flex-start;
  height: 100vh;
  min-height: 600px;
  /* 上移整体内容 */
  padding-top: 7vh;
}
.lottie-wrap {
  margin-bottom: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.login-title {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 32px;
}
.login-card {
  width: 480px;
  padding: 0 0 32px 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 18px;
  border: 2px solid #e0e0e0;
  box-shadow: 0 8px 32px 0 rgba(60,60,80,0.18), 0 2px 8px 0 #e3e6ea;
}
.login-card-title {
  font-size: 20px;
  font-weight: 600;
  text-align: center;
  margin: 24px 0 16px 0;
}
.login-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 85%;
  margin: 0 auto;
}
.error-msg {
  color: #e53935;
  text-align: center;
  margin-bottom: 8px;
}
</style>
